import 'package:flutter/material.dart';
import 'dart:math' as math;

import 'package:flutter_demo2/material-demo/media_query_example/custom_text.dart';
import 'package:flutter_demo2/material-demo/media_query_example/head_sub.dart';
import 'package:flutter_demo2/material-demo/media_query_example/nav_bar.dart';
import 'package:flutter_demo2/material-demo/media_query_example/social_media.dart';

class MediaQueryExample extends StatefulWidget {
  const MediaQueryExample({Key? key}) : super(key: key);

  @override
  State<MediaQueryExample> createState() => _MediaQueryExampleState();
}

class _MediaQueryExampleState extends State<MediaQueryExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MediaQueryExample'),
      ),
      body: SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Stack(
          children: [
            Transform.translate(
              offset: Offset(-MediaQuery.of(context).size.width * 0.4, 0),
              child: Transform.rotate(
                angle: (math.pi * 15) / 180,
                child: OverflowBox(
                  maxHeight: 1500.0,
                  minHeight: 500,
                  maxWidth: MediaQuery.of(context).size.width * 0.8,
                  minWidth: MediaQuery.of(context).size.width * 0.8,
                  child: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.bottomLeft,
                        end: Alignment.topRight,
                        stops: [0.1, 0.8],
                        colors: [
                          Color(0xff2f1a3b),
                          Color(0xff6ccad1),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Transform.translate(
              offset: Offset(MediaQuery.of(context).size.width * 0.4, 0),
              child: Transform.rotate(
                angle: (math.pi * 15) / 180,
                child: OverflowBox(
                  maxHeight: 1500.0,
                  minHeight: 500,
                  maxWidth: MediaQuery.of(context).size.width * 0.8,
                  minWidth: MediaQuery.of(context).size.width * 0.8,
                  child: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topRight,
                        end: Alignment.bottomLeft,
                        stops: [0.1, 0.8],
                        colors: [
                          Color(0xff2f1a3b),
                          Color(0xff6ccad1),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Align(
              alignment: Alignment(0, 1),
              child: SizedBox(
                height: MediaQuery.of(context).size.height * 0.8,
                width: 500,
                child: Stack(
                  children: [
                    Align(
                      alignment: Alignment(0.2, -1.2),
                      child: CustomText(text: 'D'),
                    ),
                    Align(
                      alignment: Alignment(0.6, -0.8),
                      child: CustomText(text: 'A'),
                    ),
                    Align(
                      alignment: Alignment(0.7, -0.3),
                      child: CustomText(text: 'N'),
                    ),
                    Align(
                      alignment: Alignment(0.5, 0.2),
                      child: CustomText(text: 'C'),
                    ),
                    Align(
                      alignment: Alignment(0.2, 0.65),
                      child: CustomText(text: 'E'),
                    ),
                    // Align(
                    //   alignment: Alignment(-0.15, 0.5),
                    //   child: Container(
                    //     height: MediaQuery.of(context).size.height * 0.8,
                    //     child: Image(
                    //       image: AssetImage(''),
                    //     ),
                    //   ),
                    // ),
                  ],
                ),
              ),
            ),
            Positioned(right: 0.0, child: NavBar()),
            Positioned(
              top: 100,
              left: 60.0,
              child: AnimatedOpacity(
                opacity: MediaQuery.of(context).size.width > 900 ? 1 : 0,
                duration: Duration(milliseconds: 500),
                child: HeadSub(
                    head: '#1 Dance Studio',
                    sub:
                        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, autem temporibus. Aliquam assumenda ut id nostrum laudantium nobis minima. Dolores ipsam laboriosam qui repellendus voluptas impedit vel et nemo in!'),
              ),
            ),
            Positioned(
              bottom: 50,
              right: 50.0,
              child: AnimatedOpacity(
                opacity: 1,
                duration: Duration(milliseconds: 500),
                child: HeadSub(
                    head: '#2 Ballet Dance',
                    sub:
                        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, autem temporibus. Aliquam assumenda ut id nostrum laudantium nobis minima. Dolores ipsam laboriosam qui repellendus voluptas impedit vel et nemo in!'),
              ),
            ),
            Positioned(
              bottom: 50.0,
              left: 30.0,
              child: SocialMedia(),
            )
          ],
        ),
      ),
    );
  }
}
